<template>
  <div class="vote-wrapper"  v-title data-title="六个轮子征名投票开始！你的创意入围了吗？iPhone8在等你哦" v-bind:class="{overflow_con:fadeRoles_active == true}" >
    <div class="vote-content" :id="'anchor-content'">
      <div class="thumbnail">
        <div class="btnZone">
          <a class="btnZone" v-on:click="fadeRoles_active = true;"></a>
          <a class="btnZone" v-on:click="goAnchor('#anchor')"></a>
        </div>
        <img src="../styles/asset/levyimgs/zm_02.png" />
      </div>
      <div class="thumbnail" style="padding-bottom: 0.3rem; padding-top: 0.3rem;">
        <p>短短一周六个轮子收到1168条创意小名儿，阜阳人民热情满满呀！我们根据规则从中优选出66条入围投票环节（相同名称者，以提交时间提名首创者入围），得票前6名将晋级下一轮专家评选，更有机会赢取<em>iPhone8大奖！</em>
        <p><em>快为你喜欢的小名儿投一票，投票也有奖哦！</em></p>
        <p>每人每天限投1票！</p>
      </div>
      <div class="thumbnail">
        <img src="../styles/asset/levyimgs/zm_04.png" />
      </div>
      <ul class="tab_menu">
        <li v-bind:class="{active:orderType == 2}" v-on:click="orderType = 2;_getShowList()"><a>入围名单表</a></li>
        <li v-bind:class="{active:orderType == 1}" v-on:click="orderType = 1;_getShowList()"><a>投票排行榜</a></li>
      </ul>
      <div style="">
        <div class="vote-content-list" v-for="(item, index) in this.levyVoteList">
        <router-link tag="div" :to="{path:'/activity/IndividualVoting', query: {id: item.id, tab:orderType ,index:index}}">
          <span class="ranking rankingRed" v-if="orderType == 2 && index < 9">0{{index + 1}}</span>
          <span class="ranking rankingRed" v-if="orderType == 2 && index > 8">{{index + 1}}</span>
          <span class="ranking ranking01" v-if="orderType == 1 && index == 0">第<br />{{index + 1}}<br />名</span>
          <span class="ranking ranking02" v-if="orderType == 1 && index == 1">第<br />{{index + 1}}<br />名</span>
          <span class="ranking ranking03" v-if="orderType == 1 && index == 2">第<br />{{index + 1}}<br />名</span>
          <span class="ranking ranking04" v-if="orderType == 1 && index == 3">第<br />{{index + 1}}<br />名</span>
          <span class="ranking ranking05" v-if="orderType == 1 && index == 4">第<br />{{index + 1}}<br />名</span>
          <span class="ranking ranking06" v-if="orderType == 1 && index == 5">第<br />{{index + 1}}<br />名</span>
          <span class="ranking" v-if="orderType == 1 && index > 5" >第<br />{{index + 1}}<br />名</span>
          <div class="vote-list">
            <i class="nickname">{{item.nickname}}</i>
            <i class="userPhone">{{item.userPhone}}</i>
            <i class="userName">{{item.userName}}</i>
            <i class="createTime">{{item.createTime}}</i>
          </div>
          <div class="voting">
            <span class="votes"><i class="bigVotes">{{item.voteCnt}}</i>票</span>
            <button v-if="!isExp" class="voteBtn" @click.stop="_showLayer(index);">立即投票</button>
          </div>
        </router-link>
      </div>
      </div>
      <div class="thumbnail">
        <img style="float: left;" src="../styles/asset/levyimgs/zm_06.png" />
      </div>
      <div  style="overflow: hidden;" class="thumbnail" :id="'anchor'">
        <img style="float: left;" src="../styles/asset/levyimgs/zm_07.png" />
      </div>
      <div class="thumbnail">
        <img src="../styles/asset/levyimgs/zm_08.png" />
      </div>
    </div>
    <transition name="fade-in">
      <div class="fade_box" v-show="fadeRoles" :style="'height:' + this.boxbgHeight">
        <div class="fade_bg" @click="fadeRoles = false" :style="'height:' + this.boxbgHeight"></div>
        <div class="fade_out">
          <h2>帮忙投票也有奖</h2>
          <div class="vote-phone">
            <div class="phone-content">
              <span class="uphone">手机号</span><input type="text" v-model="phone" placeholder="输入您的手机完成投票并领奖" maxlength="11">
            </div>
            <div class="code-content">
              <span class="ucode">验证码</span><input class="code" v-model="captchaCode" type="text" placeholder="验证码" maxlength="6">
            </div>
            <button class="sendCode" @click="_sendCode()" :disabled="!show">
              <span v-show="show">获取验证码</span>
              <span v-show="!show" class="count">{{count}}s</span>
            </button>
          </div>
          <button class="closeRule" @click="_saveVote()">为TA投票</button>
        </div>
      </div>
    </transition>
    <!--活动规则-->
    <transition name="fade-in">
      <div class="fade_box" v-if="fadeRoles_active">
        <div class="fade_bg" v-on:click="fadeRoles_active = false"></div>
        <div class="fade_out">
          <h2>活动规则</h2>
          <ol>
            <li>投票时间：11月13日~19日。</li>
            <li>以手机号确认投票者，每人每天只可投1票。</li>
            <li>得票数最高的6位，晋级下一轮专家评审环节。</li>
            <li>专家评审团由市文明办、市宣传委、各行业专家等组成的，综合阜阳文明出行、共享理念等多方面指标，最终评定出：1位最优采纳奖，5位大众喜爱人气奖。</li>
            <li>六个轮子将邀请6位获奖者出席11月底阜阳启动仪式，现场揭晓最终采纳名称并颁奖。</li>
            <li>六个轮子咨询热线：0558-3688688，或关注“阜阳六个轮子”微信公众号咨询。</li>
            <li>活动投票本着"公正、公平、公开"的原则，严禁任何形式的刷票行为，对于违规投票行为，主办方将有权剔除非正常数据，取消该入围者获奖权！</li>
          </ol>
          <p class="tips">*活动最终解释权归本平台所有</p>
          <a class="btn_close"  v-on:click="fadeRoles_active = false">我知道了</a>
        </div>
      </div>
    </transition>
    <simplert ref="simplert"></simplert>
  </div>
</template>

<script type="text/ecmascript-6">
  import Simplert from '../../components/dialog/dialog.vue'

  export default {
    data() {
      return {
        levyVoteList:{},
        orderType: 2,
        fadeRoles: false,
        boxbgHeight: '',
        count:'',
        phone: '',
        captchaCode: '',
        show: true,
        voteId: '',
        fadeRoles_active:false,
        img: require('../styles/asset/share.jpg'),
        isExp: false,
        indexOfVote: ''
      }
    },
    mounted() {
      var date = new Date();
      var expDate = new Date('2017-11-19 23:59'.replace(/-/g, "/"));
      if(date!=''&&expDate!=''&&date>expDate)
      {
        this.isExp = true;
      }

      this._getShowList();

      let root = process.env.MAIN_ROOT;
      let url = window.location.href;
      this.$util.sendShareMessage("六个轮子征名投票开始！你的创意入围了吗？iPhone8在等你哦","", root+this.img,url);
      this.$nextTick(() => {
        this._setBoxHeight();
      });
      window.addEventListener('resize', () => {
        this._setBoxHeight();
      })
    },
    methods: {
      goAnchor(selector) {
        let anchor = this.$el.querySelector(selector);
        document.getElementById('anchor').scrollIntoView(true);
      },
      _getShowList() {
        //this.$api.post('http://192.168.0.137:8081/activityNickname/v1/getVoteList?orderType=' + this.orderType, {}, s => {
        this.$api.post('/activityNickname/v1/getVoteList?orderType=' + this.orderType, {}, s => {
          this.levyVoteList = s.module;
//          console.log(s.module);
//          console.log(this.levyVoteList);
        })
      },
      _showLayer(index) {
        this.fadeRoles = true;
        this.indexOfVote = index;
        this.voteId = this.levyVoteList[index].id;
      },
      _setBoxHeight() {
        let height = window.innerHeight;
        this.boxbgHeight = height + 'px';
      },
      _sendCode() {
        if(this.phone === '') {
          this.open('请输入手机号码',false,'','','fade_alert',function(){
          });
          return false;
        }
        let pat = /^1\d{10}$/;
        if (!pat.test(this.phone)) {
          this.open('请输入有效的手机号码',false,'','','fade_alert',function(){});
          return false;
        }
        const time = 60;
        if (!this.timer) {
          this.timer = true;
          //this.$api.post('http://192.168.0.137:8081/sendCode/v1/sendRegSms?phone='+this.phone,{},s=>{
          this.$api.post('/sendCode/v1/sendRegSms?phone='+this.phone,{},s=>{
            this.open('验证码发送成功',false,'','','fade_success',function(){

            });
            this.count = time;
            this.show = false;
            const countTime = setInterval(() => {
              if (this.count > 0 && this.count <= time) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(countTime);
                this.timer = false;
              }
            }, 1000)
          },f=>{
            this.timer = false;
            this.open(f.errorMessage,false,'','','fade_alert',function(){

            });
            return;
          });
        }
      },
      _saveVote() {
        if(this.phone === '') {
          this.open('请输入手机号码',false,'','','fade_alert',function(){
          });
          return false;
        }
        let phonepat = /^1\d{10}$/;
        if (!phonepat.test(this.phone)) {
          this.open('请输入有效的手机号码',false,'','','fade_alert',function(){});
          return false;
        }
        if(this.captchaCode === '') {
          this.open('请输入验证码',false,'','','fade_alert',function(){});
          return false;
        }
        let codepat = /^\d{6}$/;
        if (!codepat.test(this.captchaCode)) {
          this.open('请输入正确的验证码',false,'','','fade_alert',function(){});
          return false;
        }
        //this.$api.post('http://192.168.0.137:8081/activityNickname/v1/saveVote?phone=' + this.phone + '&id=' +this.voteId +'&captchaCode=' + this.captchaCode, {}, s=> {
       this.$api.post('/activityNickname/v1/saveVote?phone=' + this.phone + '&id=' +this.voteId +'&captchaCode=' + this.captchaCode, {}, s=> {
           let _this = this;
          this.open('投票成功',true,'去拉票',function(){
            this.$router.push({ path: '/activity/IndividualVoting', query: {id: _this.voteId, tab:_this.orderType ,index:_this.indexOfVote}})
          },'',() => {},'谢谢支持！六个轮子送你2元骑行现金券24小时内到账！登录六个轮子APP—我的钱包即可查看。每天限投一票，去帮TA拉票吧！','');
          setTimeout(() => {
            this.fadeRoles = false;
            _getShowList();
          },1500);
        }, f=> {
           let _this = this;
          this.open("抱歉，投票失败！",true,'去拉票',function(){
            this.$router.push({ path: '/activity/IndividualVoting', query: {id: _this.voteId, tab:_this.orderType ,index:_this.indexOfVote}})
          },'',function(){},'每天只可投票1次，今天投票机会已经用完啦，可以继续帮好友拉票哦！','');
         setTimeout(() => {
           this.fadeRoles = false;
         },1500)
        })
      },
      open (title, confirmBtn,customConfirmBtnText,onConfirm,type,onClose,message,customCloseBtnText) {
        let obj = {
          title: title,
          useConfirmBtn: confirmBtn,
          customConfirmBtnText: customConfirmBtnText,
          onConfirm:onConfirm,
          type: type,
          onClose:onClose,
          message:message,
          customCloseBtnText:customCloseBtnText
        };
        this.$refs.simplert.openSimplert(obj);
      },
    },
    components: {
      Simplert
    }
  }
</script>

<style>
  /*reset*/
  * {  margin:0;  padding:0;  box-sizing:border-box;;  }
  html{  overflow-y:auto;  font-size:62.5%;  }
  body {  color:#333;  font-size:14px;  font-family: "arial","Open Sans","PingHei","Hiragino Sans GB","Microsoft YaHei","黑体","宋体",sans-serif;  background-color:#fff;  }
  a {  text-decoration:none;  color:#4e4e4e;  font-size:14px;  font-family: "arial","Open Sans","PingHei","Hiragino Sans GB","Microsoft YaHei","黑体","宋体",sans-serif;  -webkit-font-smoothing: antialiased;  }
  textarea,input,select{font-family: "arial","Open Sans","PingHei","Hiragino Sans GB","Microsoft YaHei","黑体","宋体",sans-serif;}
  img {  border:0;  vertical-align:top;  }
  ol, ul, li {  list-style:none;  }
  dl, dt, dd, ul, li {  margin:0;  padding:0;  }
  input,textarea{outline: none;}
  html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
  body,html{ width: 100%; height: 100% }
  .thumbnail{ width: 100%; position: relative;}
  .thumbnail>img{ width: 100%;}
  div.btnZone{ position: absolute; left: 0.2rem; top:46.5%; width: 64%; display: flex; justify-content: space-around; height: 0.8rem;}
  a.btnZone{ height: 100%; width: 2rem; display: inline-block;}
  .tab_menu{ border-bottom: 2px solid rgba(248,248,248,1); display: flex; align-items: center; justify-content: space-around; margin-bottom: 0.2rem; padding-left: 0.5rem; padding-right: 0.5rem;}
  .tab_menu>li{ display: inline-block; font-size: 14px; padding: 0.3rem 0; margin-bottom: -2px; border-bottom: 2px solid transparent;}
  .tab_menu>li.active{ border-bottom: 2px solid rgba(255,93,46,1);}
  .tab_menu>li>a{ font-size: 14px;}
  .tab_menu>li.active>a{ color: rgba(255,93,46,1);}
  /* ./reset*/
  .vote-wrapper {
    width: 100%;
    height: 100%;
  }
  .overflow_con{ overflow-y: hidden;}
  .vote-content {
    width: 100%;
    /*background: red;*/
  }
  .vote-content-list {
    overflow: hidden;
    margin: 0 0.3rem 0.3rem;
    background-color: #f8f8f8;
    border-radius: 0.1rem;
  }
  .vote-content-list>div{
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
  }
  .ranking {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 14px;
    width: 0.52rem;
    text-align: center;
    background-color: #cccccc;
    position: relative;
  }
  .ranking:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 0.1rem solid transparent;
    border-right: 0.1rem solid #fff;
    border-bottom: 0.1rem solid transparent;
    right: 0;
    top: 50%;
    margin-top: -0.1rem;
  }
  .rankingRed{ background-color: #ff5d2e;}
  .ranking01{ background-color: #ff3600;}
  .ranking02{ background-color: #ff5100;}
  .ranking03{ background-color: #ff6c00;}
  .ranking04{ background-color: #ff8a00;}
  .ranking05{ background-color: #ffa500;}
  .ranking06{ background-color: #ffba00;}
  .vote-list {
    display: block;
    flex-grow: 3;
    padding: 0.3rem 0 0.3rem 0.3rem;
    line-height: 18px;
  }
  .nickname {
    font-size: 18px;
    padding: 0 0 0.25rem;
    font-weight: 600;
    display: block;
    font-style: normal;
  }
  .userPhone {
    font-size: 12px;
    display: block;
    font-style: normal;
    color: #666;
  }
  .userName {
    font-size: 12px;
    display: block;
    font-style: normal;
  }
  .createTime {
    font-size: 12px;
    display: block;
    font-style: normal;
    color: #666;
  }
  .voting {
    /*background: blue;*/
    text-align: center;
    padding: 0.2rem 0.3rem 0.2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .votes {
    display: block;
    font-size: 10px;
    color: #666;
  }
  .bigVotes {
    font-style: normal;
    font-size: 22px;
    color: #62d36c;
    margin: 0 2px;
  }
  .voteBtn {
    padding: 0.1rem 0.2rem;
    color: #ff6600;
    border: 1px solid #ff6600;
    background: #ffffff;
    border-radius: 0.3rem;
  }
  .phone-content {
    width: 85%;
    height: 0.8rem;
    margin: 0 auto 0.3rem auto;
    background: #e8e8e8;
    border-radius: 0.1rem;
  }
  .thumbnail>p{ font-size: 14px; padding: 0 0.3rem; line-height: 22px;}
  .thumbnail>p>em{ color: #ff5d2e;  font-style: normal;}
  .phone-content input {
    width: 3.91rem;
    height: 0.8rem;
    border: none;
    font-size: 12px;
    display: inline-block;
    border-radius:  0 10px 10px 0;
    background: none;
  }
  .uphone,.ucode {
    display: inline-block;
    width: 1rem;
    height: 0.8rem;
    line-height: 0.8rem;;
    text-align: center;
    font-size: 12px;
  }
  .code-content {
    width: 52%;
    height: 0.8rem;
    float: left;
    margin-left: 0.4rem;
    background: #e8e8e8;
    border-radius: 0.1rem;
  }
  .code-content input {
    width: 2rem;
    height: 0.8rem;
    border: none;
    font-size: 12px;
    display: inline-block;
    border-radius:  0 10px 10px 0;
    background: none;
  }
  .sendCode {  float: left;  margin: 0 0 0 0.2rem;  width: 30%;  height: 0.8rem;  border: 1px solid #ff5d2e;  background: #ffffff;  color: #ff5d2e;  border-radius: 5px;  }
  .closeRule {  width: 100%; line-height: 0.8rem; border: none;  margin-top: 0.6rem;    color: #fff; background-color: #ff5d2e;  font-size: 14px; }
  .fade_box{  position: fixed; display: flex;  z-index: 999;  top: 0;  left: 0;  overflow: auto;  width: 100%; height: 100%;  align-items:center;  }
  .fade_bg{ background-color: rgba(0,0,0,0.7); position: absolute; width: 100%; height: 100%;}
  .fade_out{ background-color: #fff; border-radius: 0.25rem; width: 5.8rem; font-size: 14px; margin: 0 auto; padding-top: 0.5rem; max-height:98%; overflow: hidden;  animation-name: zoomIn;  animation-duration: .3s;  animation-fill-mode: both;  }
  .fade_out>h2{background: url("../styles/asset/levyimgs/levy05.png") no-repeat center; background-size: contain; text-align: center; color: #ff5d2e; font-size: 18px; margin: 0 0.7rem; margin-bottom: 0.4rem;}
  .fade_out>ol{ padding: 0 0.3rem 0 0.7rem;}
  .fade_out>ol>li{ list-style: decimal; line-height: 0.45rem; text-align: left; font-size: 12px;}
  @keyframes zoomIn { from {  transform: scale3d(0.3, 0.3, 0.3);  opacity: 0;  } 50% {  opacity: 1;  } }
  .fade_out> p.tips{ color: #999999; text-align: right; margin-bottom: 0.4rem; margin-right: 0.3rem; font-size: 12px;}
  .fade_out>.btn_close{ background-color: #f2f2f2; color: #ff5d2e; line-height: 0.8rem; text-align: center; margin-left: -0.5rem; margin-right: -0.5rem; display: block; border-radius: 0 0 0.4rem 0.4rem;}
</style>
